<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us" />
  <meta name="description" content="SvgC examples" />
   <link href="prettify.css" media="screen" rel="stylesheet" type="text/css" />
   <link href="style.css"    media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../js/svg_c.js"></script>
  <script type="text/javascript" src="prettify.js"></script>
  <title>SvgC - Styling</title>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>2. Styling</h1>
SVG presentation attributes can be applied directly when creating element or by using brushes. If attribute value is calculated or it changes often then it’s easier to assign it in element construction function. In all other cases using brushes is advised.

<h2>2.1 Additional attributes parameter</h2>
Each function creating SVG elements has an additional parameter placed at the end of arguments list. This parameter is just an object serving as prototype for created node. All its attributes will be copied to created node.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_brush0">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_brush0", 200, 200);
for (var i=0; i<4; i++) {
  for (var j=0; j<4; j++) {
    var color = c.rgb(100+i*50, 0, 100+j*50);
    c.orgin().translate(60+i*40, 60+j*40);
    c.path("M 0, 0 l 20,-20 -20,-20 -20, 20 Z", {fill:color});
  }
}
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_brush0", 200, 200);
for (var i=0; i&lt;4 i++) {
  for (var j=0; j&lt;4 j++) {
    var color = c.rgb(100+i*50, 0, 100+j*50);
    c.orgin().translate(60+i*40, 60+j*40);
    c.path("M 0, 0 l 20,-20 -20,-20 -20, 20 Z", {fill:color});
  }
}
  </pre>
</td>
</tr>
</table>

<h2>2.2. Brush concept</h2>

<h3>Brush types</h3>
Brush method allows user to separate SVG presentation attributes from code creating elements. There are four types of brush names, each associated with different styling method.

<h4>1. Brush by id</h4>
It’s possible to assign a unique brush to element that has id attribute. All attributes stored in this brush will be copied to created node. Name of brush-by-id must start with hash character.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_brush1">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_brush1", 200, 200);
c.brushes({
  "#shape1": {fill:"#ee1111"},
  "#shape2": {fill:"#4996ce"},
});
c.path("#shape1",
        "M 100, 75 l 20,-20 -20,-20 -20, 20 Z" +
        "M 100,125 l 20,-20 -20,-20 -20, 20 Z"
);
c.path("#shape2",
        "M  75,100 l 20,-20 -20,-20 -20, 20 Z" +
        "M 125,100 l 20,-20 -20,-20 -20, 20 Z"
);
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_brush1", 200, 200);
c.brushes({
  "#shape1": {fill:"#ee1111"},
  "#shape2": {fill:"#4996ce"},
});
c.path("#shape1",
        "M 100, 75 l 20,-20 -20,-20 -20, 20 Z" +
        "M 100,125 l 20,-20 -20,-20 -20, 20 Z"
);
c.path("#shape2",
        "M  75,100 l 20,-20 -20,-20 -20, 20 Z" +
        "M 125,100 l 20,-20 -20,-20 -20, 20 Z"
);
  </pre>
</td>
</tr>
</table>

<h4>2. Brush by class</h4>
It’s possible to created CSS style sheet inside SVG documents. Brush-by-class is just a quick way to assign as class attribute to created node. Name of brush-by-class must start with dot character.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_brush2">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_brush2", 200, 200);
c.defs(function(c, d) {
  c.style({
    ".bord": {stroke:"black", "stroke-width":"2px"},
    ".col1": {fill:"#ee1111"},
    ".col2": {fill:"#4996ce"},
  });
});
c.path(".col1 bord", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path(".col1 bord", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.path(".col2 bord", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path(".col2 bord", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
c.path(".col1 bord", "M 100,100 l 20,-20 -20,-20 -20, 20 Z");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_brush2", 200, 200);
c.defs(function(c, d) {
  c.style({
    ".bord": {stroke:"black", "stroke-width":"2px"},
    ".col1": {fill:"#ee1111"},
    ".col2": {fill:"#4996ce"},
  });
});
c.path(".col1 bord", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path(".col1 bord", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.path(".col2 bord", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path(".col2 bord", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
c.path(".col1 bord", "M 100,100 l 20,-20 -20,-20 -20, 20 Z");
  </pre>
</td>
</tr>
</table>

<h4>3. Brush by tag name</h4>
Attributes from brush named after SVG tag name will be assigned to all shapes created by this tag.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_brush3">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_brush3", 200, 200);
c.brushes({
  "path":   {fill:"#ee1111"},
  "circle": {fill:"#4996ce"}
});
c.path("M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.circle(75,  80, 15);
c.circle(125, 80, 15);
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_brush3", 200, 200);
c.brushes({
  "path":   {fill:"#ee1111"},
  "circle": {fill:"#4996ce"}
});
c.path("M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.circle(75,  80, 15);
c.circle(125, 80, 15);
  </pre>
</td>
</tr>
</table>

<h4>4. Brush by name</h4>
If you don’t want to assign id or class attribute to each created element then you can use named brushes. Those kinds of brushes have internal svgC names that are not visible in generated SVG code. One brush can be shared by multiple elements and all its attributes will be copied to created nodes. Name of brush-by-name must start with @ (at) character.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_brush4">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_brush4", 200, 200);
c.brushes({
  "@col1": {fill:"#ee1111"},
  "@col2": {fill:"#4996ce"},
  "@tran": {"fill-opacity":0.5}
});
c.path("@col1", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col1", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col1,@tran", "M 100,100 l 20,-20 -20,-20 -20, 20 Z");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_brush4", 200, 200);
c.brushes({
  "@col1": {fill:"#ee1111"},
  "@col2": {fill:"#4996ce"},
  "@tran": {"fill-opacity":0.5}
});
c.path("@col1", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col1", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col1,@tran", "M 100,100 l 20,-20 -20,-20 -20, 20 Z");
  </pre>
</td>
</tr>
</table>

<h3>Creating brush</h3>
There are couple of ways to create a brush. Brushed are store in each svgC object under attrs property. Changing this attribute will effect only object created after the change was made.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_create0">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_create0", 200, 200);
c.attrs["@col1"] = {fill:"#ee1111"};
c.attrs["@col2"] = {fill:"#4996ce"};
c.path("@col1", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");

c.attrs["@col1"] = {stroke:"#ee1111", "stroke-width":"2px"};
c.attrs["@col2"] = {stroke:"#4996ce", "stroke-width":"2px"};
c.path("@col1", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_create0", 200, 200);
c.attrs["@col1"] = {fill:"#ee1111"};
c.attrs["@col2"] = {fill:"#4996ce"};
c.path("@col1", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");

c.attrs["@col1"] = {stroke:"#ee1111", "stroke-width":"2px"};
c.attrs["@col2"] = {stroke:"#4996ce", "stroke-width":"2px"};
c.path("@col1", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
  </pre>
</td>
</tr>
</table>

SvgC has an additional function for brush modification. It takes two arguments: brush name and brush properties. Unlike attrs attribute modification, calling this function does not deletes old brush attributes but rather replaces the old ones with new values.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_create1">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_create1", 200, 200);
c.brush("@col1", {fill:"#ee1111"});
c.brush("@col2", {fill:"#4996ce"});
c.path("@col1", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");

c.brush("@col1", {stroke:"black", "stroke-width":"2px"});
c.brush("@col2", {stroke:"black", "stroke-width":"2px"});
c.path("@col1", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_create1", 200, 200);
c.brush("@col1", {fill:"#ee1111"});
c.brush("@col2", {fill:"#4996ce"});
c.path("@col1", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");

c.brush("@col1", {stroke:"black", "stroke-width":"2px"});
c.brush("@col2", {stroke:"black", "stroke-width":"2px"});
c.path("@col1", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
  </pre>
</td>
</tr>
</table>

Brush name “*” is assumed when calling brush function without name parameter. All attributes assigned to this brush will be copied to every created element.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_create2">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_create2", 200, 200);
c.brush({fill:"#ee1111"});
c.path("M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("M 100,125 l 20,-20 -20,-20 -20, 20 Z");

c.brush({fill:"#4996ce"});
c.path("M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("M 125,100 l 20,-20 -20,-20 -20, 20 Z");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_create2", 200, 200);
c.brush({fill:"#ee1111"});
c.path("M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("M 100,125 l 20,-20 -20,-20 -20, 20 Z");

c.brush({fill:"#4996ce"});
c.path("M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("M 125,100 l 20,-20 -20,-20 -20, 20 Z");
  </pre>
</td>
</tr>
</table>

It is possible to create more than one brush in a single function call by using brushes function.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_create3">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_create3", 200, 200);
c.brushes({
  "@col1": {fill:"#ee1111"},
  "@col2": {fill:"#4996ce"}
});
c.path("@col1", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col1", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_create3", 200, 200);
c.brushes({
  "@col1": {fill:"#ee1111"},
  "@col2": {fill:"#4996ce"}
});
c.path("@col1", "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col1", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@col2", "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
  </pre>
</td>
</tr>
</table>
<h3>Assigning brushes (multiple)</h3>

Brushes are assigned to newly created element by adding brush name as first argument of shape constructing function. It’s possible to assign more than one brush by separation brush names with a comma.
<br /><br />Example:
<table>
<tr>
<td>
  <div id="example_assign">
  <script type="text/javascript">
//<![CDATA[
var c = new SvgC("example_assign", 200, 200);
c.brushes({
  "path": {stroke: "black", "stroke-width":"1px"},
  "#p1":  {fill:"#ee1111"},
  "#p2":  {fill:"#4996ce"},
  "@r":   {fill:"none"},
  "@b":   {"stroke-width":"4px"}
});
c.path("#p1",    "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("#p2,@b", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.path("@r,@b",  "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@r,@b",  "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
//]]>
  </script>
  </div>
</td>
<td>
  <pre class="prettyprint">
var c = new SvgC("example_assign", 200, 200);
c.brushes({
  "path": {stroke: "black", "stroke-width":"1px"},
  "#p1":  {fill:"#ee1111"},
  "#p2":  {fill:"#4996ce"},
  "@r":   {fill:"none"},
  "@b":   {"stroke-width":"4px"}
});
c.path("#p1",    "M 100, 75 l 20,-20 -20,-20 -20, 20 Z");
c.path("#p2,@b", "M 100,125 l 20,-20 -20,-20 -20, 20 Z");
c.path("@r,@b",  "M  75,100 l 20,-20 -20,-20 -20, 20 Z");
c.path("@r,@b",  "M 125,100 l 20,-20 -20,-20 -20, 20 Z");
  </pre>
</td>
</tr>
</table>

<h3>Brush inheritance</h3>
When creating new instances of svgC based on parent instance, all brushes are copied to newly created object. Changing child brush does not effects parents copy. New copy of svgC is created for instance when defining g element or defs element.
</div>
</body>
</html>